<template>
  <!-- 首页 -->
  <div>
    <!-- 1.头部 -->
    <homeHead></homeHead>

    <!-- 新闻栏目 -->
    <van-tabs background="#dea894" swipeable color="#cee" v-model="activeTab">
      <van-tab v-for="category in categoriesList" :key="category.id" :title="category.name">
        <!-- van-list：无限加载组件
        每当拉到底部就触发load事件
        属性loading 声明了这个列表是否正在加载，如果如false就会加载下一页
        属性finished 标注当前列表是否已经到底，默认为false，如果是true，就显示结束文字，再也不会发送下一页请求
         finished-text="已经到达底部"：数据全部加载完毕之后，停止加载并显示这个内容
        immediate-check="false" ：在第一页不会执行load事件
        每当拉到底就会触发@load事件，可以执行下一页的加载
        -->
        <van-list
          v-model="category.loading"
          :finished="category.finished"
          finished-text="已经到达底部"
          @load="loadMorePost"
          :immediate-check="false"
        >
          <postItem :postData="post" v-for="post in category.postList" :key="post.id"></postItem>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
//引入首页顶部组件
import homeHead from "../components/homeHead";
//引入postItem组件
import postItem from "../components/postItem";
export default {
  components: {
    homeHead: homeHead,
    postItem: postItem
  },
  data() {
    return {
      //tab选项
      activeTab: 0,
      //栏目数组
      categoriesList: []
    };
  },
  //声明周期函数
  mounted() {
    //获取栏目数据
    this.getCategories();
  },
  //计算属性
  computed: {
    categoryId() {
      const currentCategory = this.categoriesList[this.activeTab];
      return currentCategory.id;
    }
  },
  watch: {
    //栏目数据的改变
    activeTab() {
      const currentCategory = this.categoriesList[this.activeTab];
      //如果栏目数组数据的长度等于0才发请求
      if (currentCategory.postList.length == 0) {
        this.getPost();
      }
    }
  },
  //方法
  methods: {
    //获取栏目数据
    getCategories() {
      const hotList = JSON.parse(localStorage.getItem("hotList"));
      console.log("hotList");
      console.log(hotList);

      if (hotList) {
        const res = { data: { data: hotList } };
        //改造数据  映射复制原数组，不会影响原数组的数据
        const newData = res.data.data.map(category => {
          return {
            ...category,
            postList: [],
            //当前页码
            pageIndex: 1,
            //每页数据长度
            pageSize: 5,
            //无限加载组件--是否正则加载
            loading: false,
            //无限加载组件--数据是否全部加载结束
            finished: false
          };
        });
        //栏目数据数组
        this.categoriesList = newData;
        //获取文章函数
        this.getPost();
      } else {
        this.$axios({
          url: "/category",
          method: "get"
        }).then(res => {
          console.log(res.data.data);
          //改造数据  映射复制原数组，不会影响原数组的数据
          const newData = res.data.data.map(category => {
            return {
              ...category,
              postList: [],
              //当前页码
              pageIndex: 1,
              //每页数据长度
              pageSize: 5,
              //无限加载组件--是否正则加载
              loading: false,
              //无限加载组件--数据是否全部加载结束
              finished: false
            };
          });
          //栏目数据数组
          this.categoriesList = newData;
          //获取文章函数
          this.getPost();
        });
      }

      //
      //
    },
    //获取文章
    getPost() {
      const currentCategory = this.categoriesList[this.activeTab];
      this.$axios({
        url: "/post",
        method: "get",
        //父传子数据接收
        params: {
          //当前tab选中的ID
          category: this.categoryId,
          //当前页码
          pageIndex: currentCategory.pageIndex,
          //每页数据的长度
          pageSize: currentCategory.pageSize
        }
      }).then(res => {
        console.log(res.data);
        //数据映射
        currentCategory.postList = [
          ...currentCategory.postList,
          ...res.data.data
        ];
        //数据加载完毕，将当前的loading改为false
        currentCategory.loading = false;

        //如果数据已经到了尽头，应该告诉组件已经完毕，禁止再次发送请求
        //设置了每页长度，如果最后一页的数据长度比pageSize小，那么就说明已经到了数据的尽头
        if (res.data.data.length < currentCategory.pageSize) {
          currentCategory.finished = true;
        }

        console.log("loading");
        console.log(currentCategory.postList.length);
      });
    },
    //读取更多文章
    loadMorePost() {
      const currentCategory = this.categoriesList[this.activeTab];
      //页次拉倒底部触发该函数，并将页码+1
      currentCategory.pageIndex += 1;
      //重新获取文章数据
      this.getPost();
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .van-tab__text {
  font-size: 5.556vw;
  color: #333;
}
</style>